<template>
  <div ref="main" :style="{ width: '100%', height: height }"></div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts-wordcloud'
import {mapState} from 'vuex';

export default {
  data() {
    return {
      chartInstance: null,
      option: {
        tooltip: {},
        series: [{
          type: 'wordCloud',
          gridSize: 20,
          sizeRange: this.sizeRange,  //字体大小范围
          rotationRange: [0, 0],  //旋转角度
          shape: 'square',
          width: '100%',
          height: '100%',
          drawOutOfBound: false,
          textStyle: {
            // color:['#FACC29','#FF3535','#096EE9','#21FFEB']
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 255),
                Math.round(Math.random() * 255),
                Math.round(Math.random() * 255)
              ].join(',') + ')';
            }
          },
          emphasis: {
            textStyle: {
              shadowBlur: 10,
              shadowColor: '#fff'
            }
          },
          data: []
        }]
      }
    };
  },
  props: {
    height: {
      type: String,
      defalut() {
        return '300px';
      }
    },
    sizeRange: {
      type: Array,
      defalut() {
        return [20, 60];
      }
    }
  },
  computed: {
    ...mapState(['theme'])
  },
  methods: {
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.main, this.theme);


      this.chartInstance.setOption(this.option, true);
    },
    getData(params) {
      this.option.series[0].data=params;
      this.chartInstance.setOption(this.option, true);
    }
  },
  mounted() {
    this.initChart();
    // 添加随页面变化而变化
    window.addEventListener('resize', () => {
      this.chartInstance.resize()
    })
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose()
      this.initChart()

    }
  },
};
</script>

<style scoped>
</style>
